<template>
  <view class="coupon-form">
    <!-- 优惠券名称 -->
    <view class="form-item">
      <text class="label">优惠券名称</text>
      <input 
        type="text" 
        v-model="formData.name" 
        :placeholder="placeholders.name ? '请输入优惠券名称' : ''"
        @focus="handleFocus('name')"
        @blur="handleBlur('name')"
      />
    </view>
	
    
    <!-- 优惠券类型 -->
    <view class="form-item">
      <text class="label">优惠券类型</text>
      <view class="type-selector">
        <view class="type-item" @click="selectType(1)">
          <text>满减券</text>
          <view :class="['circle', formData.type === 1 ? 'active' : '']">
            <text v-if="formData.type === 1" class="check">✓</text>
          </view>
        </view>
        <view class="type-item" @click="selectType(2)">
          <text>打折券</text>
          <view :class="['circle', formData.type === 2 ? 'active' : '']">
            <text v-if="formData.type === 2" class="check">✓</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 优惠券金额/折扣 -->
    <view class="form-item" v-if="formData.type === 1">
      <text class="label">优惠金额</text>
      <view class="amount-input">
        <text>满</text>
        <input 
          type="number" 
          v-model="formData.fullAmount"
          :placeholder="placeholders.fullAmount ? '请输入' : ''"
          @focus="handleFocus('fullAmount')"
          @blur="handleBlur('fullAmount')"
        />
        <text>元减</text>
        <input 
          type="number" 
          v-model="formData.reduceAmount"
          :placeholder="placeholders.reduceAmount ? '请输入' : ''"
          @focus="handleFocus('reduceAmount')"
          @blur="handleBlur('reduceAmount')"
        />
        <text>元</text>
      </view>
    </view>
    <view class="form-item" v-if="formData.type === 2">
      <text class="label">折扣力度</text>
      <view class="discount-input">
        <text>打</text>
        <input 
          type="number" 
          v-model="formData.discount"
          :placeholder="placeholders.discount ? '请输入' : ''"
          @focus="handleFocus('discount')"
          @blur="handleBlur('discount')"
        />
        <text>折</text>
      </view>
    </view>
    
    <!-- 发放时间 -->
    <view class="form-item">
      <text class="label">发放开始时间</text>
      <picker mode="date" :value="formData.startTime" @change="onStartTimeChange">
        <text>{{ formData.startTime || '请选择' }}</text>
      </picker>
    </view>
    
    <view class="form-item">
      <text class="label">发放结束时间</text>
      <picker mode="date" :value="formData.endTime" @change="onEndTimeChange">
        <text>{{ formData.endTime || '请选择' }}</text>
      </picker>
    </view>
    
    <!-- 投放数量 -->
    <view class="form-item">
      <text class="label">投放数量</text>
      <input 
        type="number" 
        v-model="formData.quantity" 
        :placeholder="placeholders.quantity ? '请输入投放数量' : ''"
        @focus="handleFocus('quantity')"
        @blur="handleBlur('quantity')"
      />
    </view>
    
    <!-- 每人限领 -->
    <view class="form-item">
      <text class="label">每人限领</text>
      <input 
        type="number" 
        v-model="formData.perLimit" 
        :placeholder="placeholders.perLimit ? '请输入每人限领数量' : ''"
        @focus="handleFocus('perLimit')"
        @blur="handleBlur('perLimit')"
      />
    </view>
    
    <!-- 使用有效期 -->
    <view class="form-item">
      <text class="label">使用有效期</text>
      <view class="validity-picker">
        <picker mode="date" :value="formData.validFrom" @change="onValidFromChange">
          <text>{{ formData.validFrom || '开始时间' }}</text>
        </picker>
        <text>至</text>
        <picker mode="date" :value="formData.validTo" @change="onValidToChange">
          <text>{{ formData.validTo || '结束时间' }}</text>
        </picker>
      </view>
    </view>
    
    <!-- 确认按钮 -->
    <button class="submit-btn" @click="handleSubmit">确认投放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        type: 1,
        fullAmount: '',
        reduceAmount: '',
        discount: '',
        startTime: '',
        endTime: '',
        quantity: '',
        perLimit: '',
        validFrom: '',
        validTo: ''
      },
      placeholders: {
        name: true,
        fullAmount: true,
        reduceAmount: true,
        discount: true,
        quantity: true,
        perLimit: true
      }
    }
  },
  methods: {
    selectType(type) {
      this.formData.type = type
    },
    onStartTimeChange(e) {
      this.formData.startTime = e.detail.value
    },
    onEndTimeChange(e) {
      this.formData.endTime = e.detail.value
    },
    onValidFromChange(e) {
      this.formData.validFrom = e.detail.value
    },
    onValidToChange(e) {
      this.formData.validTo = e.detail.value
    },
    handleSubmit() {
      // TODO: 提交表单逻辑
      console.log(this.formData)
    },
    handleFocus(field) {
      this.placeholders[field] = false
    },
    handleBlur(field) {
      // 如果输入框为空，则显示 placeholder
      if (!this.formData[field]) {
        this.placeholders[field] = true
      }
    }
  }
}
</script>

<style>
page {
  background-color: #FFFFFF;
}

.coupon-form {
  padding: 20rpx;
}

.form-item {
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #333;
  min-width: 160rpx;
}

input {
  flex: 1;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 30rpx;
  padding: 0 20rpx;
  text-align: center;
}

.type-selector {
  flex: 1;
  display: flex;
  gap: 40rpx;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.type-item {
  border: none;
  background: none;
  padding: 0;
}

.circle {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10rpx;
}

.circle.active {
  border-color: #3A7FED;
  background: #3A7FED;
}

.check {
  color: #FFFFFF;
  font-size: 24rpx;
  line-height: 1;
}

.amount-input,
.discount-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.amount-input input,
.discount-input input {
  flex: 1;
  text-align: center;
}

.validity-picker {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.validity-picker picker {
  width: 180rpx;
  height: 60rpx;
  border: 1rpx solid #eee;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
  margin-left: 0;
}

.validity-picker picker text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  width: 100%;
}

.validity-picker text {
  font-size: 26rpx;
  color: #333;
}

.submit-btn {
  margin-top: 40rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 30rpx;
  height: 88rpx;
  line-height: 88rpx;
}

/* 普通的日期选择器（用于发放开始/结束时间） */
picker {
  width: 240rpx;
  height: 60rpx;
  border: 1rpx solid #eee;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
  margin-left: auto;  /* 靠右对齐 */
}

/* 使用有效期的选择器容器 */
.validity-picker {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

/* 使用有效期的选择器（覆盖普通选择器的靠右样式） */
.validity-picker picker {
  width: 180rpx;
  height: 60rpx;
  margin-left: 0;  /* 覆盖普通选择器的靠右对齐 */
  justify-content: center;
}
</style>
